<template>
  <div class="content">
    <el-tabs v-model="activeName" type="card">
      <!-- 入账信息 -->
      <el-tab-pane label="入账信息" name="first">
        <el-row>
          <h3 style="margin:0;margin-bottom:24px">
            <i class="el-icon-warning-outline" />资金入账仅提供公对公转账
          </h3>
        </el-row>
        <!-- 第一卡片 -->
        <el-row>
          <el-card shadow="hover" class="first-card">
            <el-form ref="form" :model="bank_form">
              <h3>收款银行信息</h3>
              <el-col :span="6">
                <p>所属银行</p>
                <el-input v-model="collection_bank_info.bank_name" :readonly="true" />
              </el-col>
              <el-col :span="6">
                <p>开户支行</p>
                <el-input v-model="collection_bank_info.bank_branch" :readonly="true" />
              </el-col>
              <el-col :span="6">
                <p>银行账户名</p>
                <el-input v-model="collection_bank_info.name" :readonly="true" />
              </el-col>
              <el-col :span="6">
                <p>银行账户</p>
                <el-input v-model="collection_bank_info.number" :readonly="true" />
              </el-col>
            </el-form>
          </el-card>
        </el-row>
        <!-- 第二卡片-->
        <el-row>
          <el-card shadow="hover" class="second-card">
            <el-form ref="paramsRules" :model="params" :rules="paramsRules">
              <h3>入账申请</h3>
              <el-row>
                <el-col :span="8">
                  <el-form-item prop="amount">
                    <p>入账金额</p>
                    <el-input v-model="params.amount" placeholder="请输入金额" />
                    <div v-if="amountCapitalization!==''" class="el-form-item__error">{{ amountCapitalization }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <p>入账备注</p>
                    <el-input v-model="params.content" placeholder="请输入备注" />
                  </el-form-item>
                </el-col>
              </el-row>
              <div v-if="uploadVisible===true" class="upload">
                <el-row>
                  <el-col>
                    <p>入账凭证</p>
                    <el-upload
                      ref="upload"
                      action="string"
                      :file-list="fileList"
                      list-type="picture-card"
                      :http-request="UploadImage"
                      :limit="3"
                      :on-exceed="exceedLimit"
                      :on-remove="handleRemove"
                    >
                      <i slot="default" class="el-icon-plus" />
                      <div slot="file" slot-scope="{file}" style="width:100%;height:100%">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt>
                        <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-delete"
                          >
                            <i class="el-icon-delete" @click="handleRemove(file)" />
                          </span>
                        </span>
                      </div>
                    </el-upload>
                  </el-col>
                </el-row>
              </div>
              <el-form-item class="submit">
                <el-button type="primary" @click="showEntryApplyDialog">提交</el-button>
              </el-form-item>
            </el-form>
            <!-- 提示对话框 -->
            <el-dialog
              title="提示"
              :visible.sync="entryApplyDialog"
              width="30%"
              :before-close="handleEntryClose"
            >
              <span style="text-align: left;">请确认输入内容，提交后不可修改</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="handleEntryClose">取 消</el-button>
                <el-button class="el-button-right" type="primary" @click="entryApply">确 定</el-button>
              </span>
            </el-dialog>
            <!-- 遮罩层 -->
            <div v-if="bank_is_bind===false" class="mask">
              <i class="el-icon-warning" />
              <p>需银行绑定后方可申请入账</p>
              <el-button type="primary" @click="activeName='second'">绑定</el-button>
            </div>
          </el-card>
        </el-row>
        <!-- 第三卡片-->
        <el-row>
          <!-- 右面 -->
          <el-card shadow="hover" class="third-card">
            <h3>近期入账申请</h3>
            <el-table style="width: 100%;" :header-cell-style="{color:'black'}" :data="entryList">
              <el-table-column label="申请时间" min-width="70px">
                <template v-slot="scope">{{ scope.row.created_at | dateFormat() }}</template>
              </el-table-column>
              <el-table-column label="金额" min-width="65px">
                <template v-slot="scope">
                  <span v-if="scope.row.amount==='0.00'||scope.row.amount===''">---</span>
                  <el-tooltip v-else class="item" effect="dark" :content="$capitalizationAmount( scope.row.amount)" placement="top-start">
                    <span>￥{{ scope.row.amount }}</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column label="状态" min-width="55px">
                <template v-slot="scope" min-width="200px">
                  <span v-if="scope.row.status === 'PLATFORM_GIFT'">平台调整</span>
                  <span v-else-if="scope.row.status ==='CHECK_PASS'">已入账</span>
                  <span v-else-if="scope.row.status ==='CHECK_REJECT'">已拒绝</span>
                  <span v-else-if="scope.row.status ==='WITH_CHECK'">待入账</span>
                </template>
              </el-table-column>
              <el-table-column prop="check_datetime" label="审批时间">
                <template v-slot="scope" min-width="200px">
                  <span v-if="scope.row.check_datetime !== null">{{ scope.row.check_datetime }}</span>
                  <span v-else>---</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-row>
      </el-tab-pane>
      <!-- 银行绑定 -->
      <el-tab-pane label="银行绑定" name="second">
        <el-card v-if="bank_is_bind===false" shadow="hover" class="bank-card">
          <el-row>
            <el-form ref="form" :model="bank_form">
              <h3>对公账户进行绑定</h3>
              <el-row>
                <el-col :span="8">
                  <p>所属银行</p>
                  <el-select
                    v-if="bank_form_display"
                    v-model="bank_form.bank_id"
                    placeholder="请选择银行"
                    @change="changeBankListValue"
                  >
                    <el-option
                      v-for="item in bankList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                    <el-option label="其它银行" value="其它银行" />
                  </el-select>
                  <el-input v-else v-model="bank_form.bank_id" />
                </el-col>
                <el-col :span="8">
                  <p>开户支行</p>
                  <el-input v-model="bank_form.bank_branch_info" placeholder="请输入支行名称" />
                </el-col>
                <el-col :span="8">
                  <p>银行账户</p>
                  <el-input v-model="bank_form.bank_number" placeholder="请输入银行账户" />
                </el-col>
              </el-row>
              <el-form-item class="submit">
                <el-button type="primary" @click="formValidation">绑定</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-card>
        <el-card v-else shadow="hover" class="bank-card">
          <el-row>
            <el-form ref="form" :model="bank_info">
              <h3>对公账户进行绑定</h3>
              <el-row>
                <el-col :span="8">
                  <p>所属银行</p>
                  <el-input v-model="bank_info.bank_name" :readonly="true" />
                </el-col>
                <el-col :span="8">
                  <p>开户支行</p>
                  <el-input v-model="bank_info.bank_branch_info" :readonly="true" />
                </el-col>
                <el-col :span="8">
                  <p>银行账户</p>
                  <el-input v-model="bank_info.bank_number" :readonly="true" />
                </el-col>
              </el-row>
              <el-form-item class="submit">
                <el-button type="primary">已绑定</el-button>
              </el-form-item>
            </el-form>
          </el-row>
        </el-card>
        <!-- 提示对话框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>请确认输入内容，绑定后不可修改</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button class="el-button-right" type="primary" @click="binding">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  getBankList,
  setBindingBank,
  getEntryList,
  setApplyMoney
} from '@/api/capital'
import { getInit, upload } from '@/api/user'
import { Message } from 'element-ui'
import { capitalizationAmount } from '@/utils/myFunction'
export default {
  name: 'Application',
  filters: {
    dateFormat(date) {
      var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)
      return newDate[0]
    }
  },
  data() {
    var amount = (rule, value, callback) => {
      if (!value) {
        this.amountCapitalization = ''
        return callback(new Error('金额不能为空'))
      }
      // 判断是否有非法字符
      const flag = value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '').replace(/\.$/, '').replace(/^0+0$/, '0').replace(/^0?.+0$/, '0')
      // 根据是否有小数点分成两个部分
      if (flag) {
        this.params.amount = flag
        this.amountCapitalization = capitalizationAmount(this.params.amount)
        // return callback(new Error(capitalizationAmount(this.params.amount)))
      } else {
        this.params.amount = ''
        this.amountCapitalization = ''
        return callback(new Error('输入金额不合法'))
      }
    }
    return {
      activeName: 'first',
      bank_form: {
        bank_id: '',
        bank_branch_info: '',
        bank_number: ''
      },
      bank_info: {
        bank_name: '',
        bank_branch_info: '',
        bank_number: ''
      },
      bankList: [],
      query: {
        limit: 10,
        page: 1,
        status: '',
        start_at: '',
        end_at: ''
      },
      entryList: [],
      collection_bank_info: {},
      bank_form_display: true,
      bank_display: true,
      dialogVisible: false,
      bank_name: '',
      params: {
        amount: '',
        media: [],
        content: ''
      },
      dialogImageUrl: '',
      imgDialogVisible: false,
      bank_is_bind: false,
      uploadVisible: false,
      fileList: [],
      entryApplyDialog: false,
      amountCapitalization: '',
      paramsRules: {
        amount: [{ validator: amount, trigger: 'blur' }]
      }
    }
  },
  watch: {
    'bank_form.bank_id': function(value) {
      if (value === '其它银行') {
        this.bank_form_display = false
      }
    }
  },
  created() {
    this.getBankList()
    this.getEntryList()
    this.getInit()
  },
  methods: {
    UploadImage(param) {
      const formData = new FormData()
      formData.append('media', param.file)
      upload(formData, param)
        .then((response) => {
          const imgUrl = response.data.data.domain + response.data.data.url
          this.params.media.push(imgUrl)
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: '上传图片请求超时',
            duration: 3000,
            type: 'warning'
          })
        })
    },
    handleRemove(file) {
      const fileList = this.$refs.upload.uploadFiles
      const index = fileList.findIndex(fileItem => {
        return fileItem.uid === file.uid
      })
      fileList.splice(index, 1)
      this.params.media.splice(index, 1)
    },
    changeBankListValue(val) {
      let obj = {}
      obj = this.bankList.find((item) => {
        return item.id === val
      })
      this.bank_name = obj.name
    },
    binding() {
      setBindingBank(this.bank_form).then((res) => {
        this.dialogVisible = false
        this.getInit()
      })
    },
    getBankList() {
      getBankList().then((res) => {
        this.bankList = res.data.data
      })
    },
    getEntryList() {
      getEntryList(this.query).then((res) => {
        this.entryList = res.data.data.data

        //
      })
    },
    getInit() {
      getInit().then((res) => {
        //
        //
        this.collection_bank_info = res.data.data.bank
        this.bank_is_bind = res.data.data.bank_is_bind
        this.uploadVisible = res.data.data.bank_is_bind
        this.bank_info = res.data.data.bank_info
      })
    },
    formValidation() {
      if (
        this.bank_form.bank_branch_info === '' ||
        this.bank_form.bank_branch_info === '' ||
        this.bank_form.bank_number === ''
      ) {
        Message({
          message: '请将信息填写完整',
          type: 'warning',
          duration: 3000,
          showClose: true
        })
      } else {
        this.dialogVisible = true
      }
    },
    exceedLimit() {
      this.$message({
        message: '最多选取3张图片',
        type: 'error',
        duration: 3000,
        showClose: true
      })
    },
    showEntryApplyDialog() {
      if (this.params.amount === '' || this.params.amount === '0') {
        this.$message({
          showClose: true,
          message: '入账金额不能为空和0',
          duration: 3000,
          type: 'warning'
        })
      } else {
        this.entryApplyDialog = true
      }
    },
    handleEntryClose() {
      this.entryApplyDialog = false
    },
    entryApply() {
      this.entryApplyDialog = false
      this.params.amount = parseFloat(this.params.amount).toFixed(2)
      setApplyMoney(this.params)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              showClose: true,
              message: '入账申请成功。',
              duration: 3000,
              type: 'success'
            })
            this.getEntryList()
            this.fileList = []
            this.amountCapitalization = ''
            this.params = {
              amount: '',
              media: [],
              content: ''
            }
          } else {
            this.$message({
              showClose: true,
              message: '入账申请失败，请检查金额是否填写正确',
              duration: 3000,
              type: 'error'
            })
          }
        })
        .catch(() => {
          this.$message({
            showClose: true,
            message: '入账申请失败，请检查金额是否填写正确',
            duration: 3000,
            type: 'error'
          })
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 24px;
  .el-row {
    min-width: 1200px;
  }
  .fontColor {
    color: #2797fa;
  }
  .bank-card {
    display: inline-block;
    border: 1px solid #dcdfe6;
    font-size: 12px;
    width: 100%;
    .el-form {
      width: 100%;
      height: 100%;
    }
    h3 {
      text-align: left;
      font-size: 18px;
      margin: 0;
      font-weight: bold;
    }
    .from-top {
      display: inline-block;
      width: 33.3%;
      margin-bottom: 0;
      p {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        margin-top: 24px;
      }
      .el-input {
        margin-top: 24px;
        width: calc(100% - 40px);
        float: left;
      }
      .el-select {
        margin-top: 24px;
        width: calc(100% - 40px);
        float: left;
      }
      // background-color: black;
    }
    .submit {
      margin-bottom: 0;
      margin-top: 24px;
      width: 100%;
      text-align: center;
    }
  }
}
.first-card {
  width: 100%;
  display: inline-block;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  text-align: center;
  .el-form {
    width: 100%;
    height: 100%;
  }
  h3 {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
  }
  .from-top {
    display: inline-block;
    width: 25%;
    margin-bottom: 0;
    p {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      margin-top: 24px;
    }
    .el-input {
      margin-top: 24px;
      width: calc(100% - 40px);
      float: left;
    }
    // background-color: black;
  }
}
.second-card {
  width: 100%;
  margin-top: 0;
  margin-top: 39px;
  display: inline-block;
  border: 1px solid #dcdfe6;
  font-size: 12px;
  .el-form {
    width: 100%;
    height: 100%;
  }
  h3 {
    text-align: left;
    font-size: 18px;
    margin: 0;
    font-weight: bold;
  }
  .from-top {
    display: inline-block;
    width: 33.3%;
    p {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      margin-top: 24px;
    }
    .el-input {
      margin-top: 24px;
      width: calc(100% - 40px);
      float: left;
    }
  }
  .upload {
    p {
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      margin: 0;
      margin-top: 24px;
      margin-bottom: 24px;
    }
  }
  .submit {
    margin-bottom: 0;
    width: 100%;
    text-align: center;
  }
}

.third-card {
  width: 100%;
  display: inline-block;
  font-size: 12px;
  // height: 554px;
  margin-top: 39px;
  text-align: center;
  h3 {
    text-align: left;
    font-size: 18px;
    margin: 0;
    margin-bottom: 40px;
  }
  .el-table::before {
    height: 0px;
  }
}

.el-form-item {
  display: inline-block;
  width: 362px;
}
.mask {
  position: absolute;
  z-index: 1000;
  top: 31px;
  left: 0px;
  width: 100%;
  min-width: 680px;
  height: 264px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding-top: 50px;
  i {
    font-size: 48px;
    // margin-top: 50px;
    opacity: 1;
    color: black;
  }
  p {
    color: black;
  }
}
.el-col {
  padding-left: 28px;
  padding-right: 28px;
  margin-bottom: 24px;
  p {
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    margin-top: 24px;
  }
  .el-input {
    margin-top: 24px;
  }
  .el-select {
    margin-top: 24px;
    width: 100%;
  }
}
</style>
<style>
/* .el-card__body {
  padding: 24px !important;
} */
.el-tabs__header {
  margin: 0 0 40px !important;
}
.el-upload--picture-card {
  width: 128px !important;
  height: 128px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 128px !important;
  height: 128px !important;
  margin: 0 20px 0 0 !important;
}
</style>
